<template>
	<view class="ikz-bid">
		<ikz-loading :css-data="loading_css"></ikz-loading>
		<view class="ikz-orderdetail" v-if="loadEnd">
 			<view class="ikz-tips">
 				<view class="ikz-tips-title" v-if="show_info.status == 0">
 					未支付订单
 				</view>
 				<view class="ikz-tips-title" v-if="show_info.status == 1">
 					订单待接单
 				</view>
 				<view class="ikz-tips-title" v-if="show_info.status == 2">
 					订单待收货
 				</view>
 				<view class="ikz-tips-title" v-if="show_info.status == 3">
 					订单已完成
 				</view>
 				<view class="ikz-tips-title" v-if="show_info.status == 4">
 					订单已取消
 				</view>
 			</view>
 			<view class="ikz-orderdetail-main">
 				<view class="store-info">
					<image class="img" :src="adminImgPath+show_info.business_logo_image" mode="aspectFill"></image>
					<view class="name">{{show_info.business_name}}</view>
				</view>
				<view class="order-info">
					<view class="title">订单信息</view>
					<view class="cont">
						<view class="tag">
							<text>订单号码</text>
							<text>{{show_info.order_no}}</text>
						</view>
						<view class="tag">
							<text>下单时间</text>
							<text>{{show_info.createtime}}</text>
						</view>
						<view class="tag">
							<text>配送方式</text>
							<text v-if="show_info.delivery==1">到店自取</text>
							<text v-if="show_info.delivery==2">校园跑腿</text>
						</view>
						<view class="tag" v-if="show_info.remarks">
							<text>订单备注</text>
							<text>{{show_info.remarks}}</text>
						</view>
					</view>
				</view>
				<view class="goods-info">
					<view class="column" v-for="(item,index) in show_info.goods_list" :key="index">
						<image class="left" :src="adminImgPath+item.image" mode="aspectFill"></image>
						<view class="center">
							<view class="name">{{item.name}}</view>
							<view class="num">X{{item.goods_count}}</view>
						</view>
						<view class="right"><text>￥</text>{{item.price * item.goods_count}}</view>
					</view>
					<view class="price-total">
						<view class="tag">价格合计</view>
						<view class="price"><text>￥</text>{{show_info.total_fee}}</view>
					</view>
				</view>
			</view>
 			<view class="ikz-bottom" v-if="show_info.status == 0">
 				<view class="btn-box-left">
 					<view class="priceBox">
 						<view class="hx-color-white"><text>￥</text>{{show_info.total_fee}}</view>
 					</view>
 				</view>
 				<view class="btn-box-right" @click="payment()">
 					<view class="jiesuan">立即支付</view>
 				</view>
 			</view>
 			<view class="ikz-bottom" v-if="show_info.status == 1">
 				<view class="ikz-help-btn1" @click="cancel(show_info.id)">取消订单</view>
 			</view>
 			<view class="ikz-bottom" v-if="show_info.status == 2">
 				<view class="ikz-help-btn2" @click="submit(show_info.id)">确认收货</view>
 			</view>
 		</view>
 		<!-- list -->
 	</view>
</template>

 <script>
 	import ikzLoading from '@/pages/Component/Public/Loading/loading.vue';
 	import ikzOrderdetail from '@/pages/Component/Public/Orderdetail/public/orderdetail/orderdetail.vue';
 	import ikzTopbg from '@/pages/Component/Public/Topbg/public/topbg/topbg.vue';
 	var app = getApp();
 	import ikz from '@/pages/Common/tools.js';
 	export default {
 		components: {
 			ikzLoading,
 			ikzOrderdetail,
 			ikzTopbg
 		},
 		data() {
 			return {
				adminImgPath: app.globalData.adminImgPath,
 				id: '',
 				loading_css: {
 					display: 'flex',
 				},
 				show_info: {},
 				show_status: 2,
				loadEnd: false
 			};
 		},
 		onLoad(options) {
 			this.id = options.id;
 			this.detailInfo((res) => {
 				this.loading_css.display = 'none';
 			});
 		},
 		onPullDownRefresh() {
 			this.detailInfo((res) => {
 				uni.stopPullDownRefresh();
 			});
 		},
 		onShow() {
 			if (this.show_status == 2) {
 				this.show_status = 3
 			} else {
 				this.detailInfo((res) => {
 					this.loading_css.display = 'none';
 				});
 			}
 		},
 		methods: {
 			//请求页面数据
 			detailInfo(fn) {
 				var path = '/xyb/supermarket/order/detail';
 				var data = {
 					id: this.id
 				};
 				ikz.post(path, data, res => {
 					if (res.data.code) {
 						this.show_info = res.data.data;
						for(var i in res.data.data.goods_list) {
							this.show_info.goods_list[i].total_price = parseFloat(res.data.data.goods_list[i].goods_count*res.data.data.goods_list[i].price).toFixed(2)
						}
 					} else {
 						uni.showModal({
 							title: '提示',
 							content: res.data.msg,
 							showCancel: false,
 							success: function(res) {}
 						});
 					}
					this.loadEnd = true
 					fn();
 				});
 			},
 			//取消订单
 			cancel(id) {
 				var that = this;
 				uni.showModal({
 					title: '提示',
 					content: '确定取消订单？',
 					success: function(res) {
 						if (res.confirm) {
 							var path = '/xyb/supermarket/order/cancel';
 							var data = {
 								id: id
 							};
							uni.showLoading({
								title: "加载中",
								mask: true
								
							})
 							ikz.post(path, data, res => {
 								if (res.data.code) {
 									uni.showToast({
 										title: '取消成功',
 										duration: 2000
 									});
 									setTimeout(function() {
 										uni.navigateBack({
 											delta: 1
 										});
 									}, 2000)
 									that.$forceUpdate();
 								} else {
 									uni.showModal({
 										title: '提示',
 										content: res.data.msg,
 										showCancel: false,
 										success: function(res) {}
 									});
 								}
								uni.hideLoading()
 							});
 						} else if (res.cancel) {
 							console.log('用户点击取消');
 						}
 					}
 				});
 
 			},
 			// 确认收货
			submit(id) {
 				var that = this;
 				uni.showModal({
 					title: '提示',
 					content: '确定货物已送达？',
 					success: function(res) {
 						if (res.confirm) {
 							var path = '/xyb/supermarket/order/confirm_complete';
 							var data = {
 								id: id
 							};
 							uni.showLoading({
 								title: "加载中",
								mask: true
 							})
 							ikz.post(path, data, res => {
 								if (res.data.code) {
 									uni.showToast({
 										title: '确认收货成功',
 										duration: 2000
 									});
 									that.detailInfo((res) => {});
 									that.$forceUpdate();
 								} else {
 									uni.showModal({
 										title: '提示',
 										content: res.data.msg,
 										showCancel: false,
 										success: function(res) {}
 									});
 								}
								uni.hideLoading()
 							});
 						} else if (res.cancel) {
 							console.log('用户点击取消');
 						}
 					}
 				});
 			},
 			// 调起小程序微信支付
 			payment() {
 				uni.showLoading({
 					mask: true,
 					title: '正在请求支付...'
 				})
 				var path = '/xyb/supermarket/order/wx_minapp_pay';
 				var data = {
 					order_no: this.show_info.order_no,
 				};
 				ikz.post(path, data, res => {
 					console.log("调起小程序微信支付 ", res)
 					uni.hideLoading()
 					if (res.data.code == 1) {
 						wx.requestPayment({
 							timeStamp: res.data.data.timeStamp,
 							nonceStr: res.data.data.nonceStr,
 							package: res.data.data.package,
 							signType: res.data.data.signType,
 							paySign: res.data.data.paySign,
 							success: res => {
 								console.log('success', res);
 								if (res.errMsg == "requestPayment:ok") {
 									uni.showToast({
 										title: '支付成功',
 										duration: 2000,
 										icon: 'success'
 									})
 									uni.reLaunch({
 										url: "/pages/Component/supermarket/Program/store/success?id="+this.id+"&type="+this.show_info.delivery+"&address="+this.show_info.address
 									})
 								}
 							},
 							fail: res => {
 								console.log('fail', res);
 								uni.showToast({
 								title: '支付失败，请稍后再试',
 									duration: 2000,
 									icon: 'none'
 								})
 							},
 							complete: res => {
 								console.log('complete', res);
 							}
 						})
 					} else {
 						uni.showToast({
 							title: res.data.msg,
 							icon: 'none'
 						})
 					}
 				})
 			},
 		}
 	};
 </script>
 
 <style lang="scss">
 	page {
 		width: 100%;
 		height: 100%;
 		background: #F3F3F3;
 	}
 	
 	.ikz-orderdetail {
 		padding: 29rpx;
 	}
 
 	.ikz-tips-title {
 		font-weight: 600;
 		font-size: 29rpx;
 		line-height: 40rpx;
 	}
 
	.ikz-orderdetail-main {
		margin-top: 29rpx;
		
		.store-info {
			padding: 29rpx;
			display: flex;
			align-items: center;
			background: #fff;
			border-radius: 9rpx;
			
			.img {
				width: 58rpx;
				height: 58rpx;
			}
			
			.name {
				font-weight: 600;
				font-size: 29rpx;
				line-height: 40rpx;
				color: #333333;
				margin-left: 22rpx;
				flex: 1;
			}
		}
	
		.order-info {
			padding: 29rpx;
			background: #fff;
			border-radius: 9rpx;
			margin-top: 15rpx;
			
			.title {
				font-weight: 600;
				font-size: 25rpx;
				line-height: 29rpx;
				color: #333333;
				padding-bottom: 22rpx;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			}
			
			.cont {
				.tag {
					display: flex;
					justify-content: space-between;
					font-weight: 400;
					font-size: 22rpx;
					line-height: 29rpx;
					color: #979797;
					margin-top: 22rpx;
					
					text:last-child {
						max-width: 60vw;
						word-break: break-all;
						word-wrap: break-word;
					}
				}
			}
		}
	
		.goods-info {
			background: #FFFFFF;
			border-radius: 9rpx;
			padding: 29rpx;
			margin-top: 20rpx;
		
			.column {
				margin-bottom: 29rpx;
				display: flex;
		
				.left {
					width: 102rpx;
					height: 102rpx;
					border-radius: 9rpx;
				}
		
				.center {
					flex: 1;
					margin: 0 29rpx;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;
		
					.name {
						width: 100%;
						font-weight: 600;
						font-size: 26rpx;
						line-height: 29rpx;
						color: #333333;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						-webkit-line-clamp: 2;
					}
		
					.num {
						width: 100%;
						font-weight: 400;
						font-size: 22rpx;
						line-height: 29rpx;
						color: #979797;
					}
				}
		
				.right {
					font-weight: 600;
					font-size: 33rpx;
					line-height: 29rpx;
					color: #333333;
		
					text {
						font-size: 22rpx;
					}
				}
			}
		
			.price-total {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 1px solid rgba(0, 0, 0, 0.1);
				padding-top: 29rpx;
		
				.tag {
					font-weight: 400;
					font-size: 25rpx;
					line-height: 29rpx;
				}
		
				.price {
					font-weight: 600;
					font-size: 33rpx;
					line-height: 29rpx;
					color: #333333;
		
					text {
						font-size: 22rpx;
					}
				}
			}
		}
	}
 
 	.ikz-bottom {
 		position: fixed;
 		z-index: 999;
 		display: flex;
 		bottom: 15px;
 		justify-content: center;
 		align-items: center;
 		margin: 0;
 		height: 50px;
 		width: calc(100% - 32px);
 	
 		.btn-box-left {
 			height: 100%;
 			flex: auto;
 			display: flex;
 			justify-content: flex-start;
 			align-self: center;
 			align-items: center;
 			background: #222222;
 			border-top-left-radius: 100upx;
 			border-bottom-left-radius: 100upx;
 			padding-left: 17rpx;
 	
 			.priceBox {
 				flex: auto;
 				margin-left: 22rpx;
 	
 				.hx-color-white {
 					font-weight: 600;
 					font-size: 33rpx;
 					line-height: 29rpx;
 					color: #fff;
 	
 					text {
 						font-size: 22rpx;
 					}
 				}
 			}
 	
 		}
 	
 		.btn-box-right {
 			width: 170rpx;
 			height: 100%;
 			position: relative;
 			display: flex;
 			justify-content: flex-start;
 			align-self: center;
 			align-items: center;
 	
 			.jiesuan {
 				width: 100%;
 				height: 100%;
 				font-size: 28upx;
 				border-top-right-radius: 100upx;
 				border-bottom-right-radius: 100upx;
 				text-align: center;
 				display: flex;
 				justify-content: center;
 				align-self: center;
 				align-items: center;
 				background: linear-gradient(45deg, #FFEB3B, #FFC107);
 				font-weight: bold;
 			}
 		}
 	}
 
 	.ikz-help-btn1 {
 		width: 100%;
		height: 100%;
 		background: #FF7F7F;
 		border-radius: 50rpx;
 		color: #fff;
		display: flex;
		align-self: center;
		align-items: center;
		justify-content: center;
 	}
 
 	.ikz-help-btn2 {
 		width: 100%;
 		height: 100%;
 		background: #FBC12D;
 		border-radius: 50rpx;
 		color: #fff;
 		display: flex;
 		align-self: center;
 		align-items: center;
 		justify-content: center;
 	}
 </style>
 